<template>
  <div>
    <div class="row-header">
      <el-form label-width="150px" :inline="true">
        <el-form-item label="注册时间">
          <el-date-picker class="select" v-model="insertTime" type="daterange" align="right" unlink-panels
                          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                          format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select size="small" v-model="dictExamineStatusName" placeholder="处理状态" style="width: 300px;" clearable>
            <el-option v-for="state in dictExamineStatusSelect" :key="state.value" :label="state.label"
                       :value="state.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" @click="currentPage = 0 ; initData()"
                   icon="el-icon-search">查询
        </el-button>
      </div>
    </div>
    <div class="row-main">
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData"
                tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="nickName" label="客户" align="center"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="customerPayFee" label="总花费金额" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="拥有卡数" align="center"></el-table-column>
        <el-table-column prop="certificatesNum" label="身份证号" align="center"></el-table-column>
        <el-table-column prop="loginName" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="certificatesOne" label="证件正面" align="center">
          <template slot-scope="scope" v-if="scope.row.certificatesOne !== null">
            <el-popover placement="bottom" title="" trigger="hover"><img :src="scope.row.certificatesOne"><img
              slot="reference" :src="scope.row.certificatesOne" style="width: 100%; height: 100%;"></el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="certificatesTwo" label="证件反面" align="center">
          <template class="pic" slot-scope="scope" v-if="scope.row.certificatesTwo !== null">
            <el-popover placement="bottom" title="" trigger="hover"><img :src="scope.row.certificatesTwo"><img
              slot="reference" :src="scope.row.certificatesTwo" style="width: 100%; height: 100%;"></el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="certificatesThree" label="手持证件" align="center">
          <template class="pic" slot-scope="scope" v-if="scope.row.certificatesThree !== null">
            <el-popover placement="bottom" title="" trigger="hover"><img :src="scope.row.certificatesThree"><img
              slot="reference" :src="scope.row.certificatesThree" style="width: 100%; height: 100%;"></el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="dictExamineStatusName" label="审核结果" align="center"></el-table-column>
        <el-table-column prop="insertTimeTime" label="注册时间" align="center"></el-table-column>
        <el-table-column prop="name" label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-button class="operation" @click="viewCustomerCard(scope.row)">查看下属卡</el-button>
                <el-button class="operation" @click="showNotPass(scope.row)">查看历史订单</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="row-main-pager"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next, jumper"
        background></el-pagination>
    </div>
  </div>
</template>

<script>
import {userDataListForUser} from '@/api/getData'

export default {
  name: 'RealName',
  data() {
    return {
      maxPage: 1,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      nickName: '',
      customerName: '',
      certificatesNum: '',
      loginName: '',
      dictExamineStatus: '',
      certificatesOne: '',
      certificatesTwo: '',
      certificatesThree: '',
      dictExamineStatusName: '',
      insertTime: '',
      dealTime: '',
      examineUser: '',
      imageUrl: '',
      dictExamineStatusSelect: [
        {
          value: 'NONREAL',
          label: '未实名'
        },
        {
          value: 'WAIT',
          label: '待审核'
        },
        {
          value: 'PASS',
          label: '已实名'
        },
        {
          value: 'REFUSE',
          label: '拒绝'
        }
      ],
      value: false,
      id: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    imgStyle({row, column, rowIndex, columnIndex}) {
      if ((rowIndex > 0 || row.insertUserName2) && columnIndex === 12) {
        return 'pic'
      }
    },
    async initData() {
      let startTime = null
      let endTime = null
      if (this.insertTime !== '' && this.insertTime != null) {
        startTime = this.insertTime[0]
        endTime = this.insertTime[1]
      }
      const returnData = await userDataListForUser({
          insertStartDate: startTime,
          insertEndDate: endTime,
          dictExamineStatus: this.dictExamineStatusName,
          page: {
            current: this.currentPage + '',
            size: this.pageSize + '',
            ascs: this.ascs,
            descs: this.descs
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        })
      this.tableData = []
      if (returnData._result) {
        const imageUrl = localStorage.getItem('image')
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.remark = item.remark
          obj.nickName = item.nickName // 客户
          obj.customerName = item.customerName // 客户名称
          obj.certificatesNum = item.certificatesNum // 身份证号
          obj.loginName = item.loginName // 联系电话
          obj.certificatesOne = imageUrl + item.certificatesOne // 证件正面
          obj.certificatesTwo = imageUrl + item.certificatesTwo // 证件反面
          obj.certificatesThree = imageUrl + item.certificatesThree // 手持证件
          obj.dictExamineStatus = item.dictExamineStatus // 审核结果
          obj.dictExamineStatusName = item.dictExamineStatusName // 审核结果
          obj.insertTime = item.insertTime // 注册时间
          obj.insertTimeTime = item.insertTimeTime // 注册时间
          obj.cardCount = item.cardCount // 拥有卡数
          obj.customerPayFee = item.customerPayFee //客户总花费
          this.tableData.push(obj)
        })
        this.tableLoading = false
      }
    },
    viewCustomerCard(customer) {
      this.$router.push({path: '/customer/card/' + customer.id})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage = val
      this.initData()
    },
  }
}
</script>

<style scoped lang="scss">
.examine /deep/ .el-dialog__body {
  text-align: center;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 40px;
  color: #606266;
  font-weight: 700;
}

.el-popper[x-placement^=bottom] {
  margin-right: -25px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}

.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -25px;

  button {
    display: block;
  }

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
